<template>
    <div ref="visitChart" v-height="400"></div>
</template>
<script>
    import echarts from 'echarts';
    export default {
        data () {
            return {
                xData: [],
                y1Data: [],
                y2Data: [],
                y3Data: []
            }
        },
        methods: {
            handleGetData (data) {
                // console.log(data)
                let nameArr = [];
                let y1 = [];
                let y2 = [];
                let y3 = [];
                if (data && data.length > 0) {
                    data.forEach((items) => {
                        nameArr.push(items.clinic_name)
                        y1.push(parseInt(items.buy_number, 10))
                        y2.push(parseInt(items.clinic_number, 10))
                        y3.push(parseInt(items.diff_number, 10))
                    })
                }
                this.xData = nameArr
                this.y1Data = y1;
                this.y2Data = y2;
                this.y3Data = y3;
                this.handleSetVisitChart()
            },
            handleSetVisitChart () {
                this.visitChart = echarts.init(this.$refs.visitChart);
                this.visitChart.setOption(
                    {
                        xAxis: {
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    color: '#D7DDE4'
                                }
                            },
                            axisTick: {
                                alignWithLabel: true,
                                lineStyle: {
                                    color: '#D7DDE4'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#7F8B9C'
                                }
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#F5F7F9'
                                }
                            },
                            data: this.xData
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#7F8B9C'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#F5F7F9'
                                }
                            },
                            type: 'value'
                        },
                        legend: {
                            data: ['治疗（光疗）', '购买（光疗）', '剩余（光疗）'],
                            x: 'right'
                        },
                        series: [
                            {
                                data: this.y1Data,
                                name: '治疗（光疗）',
                                type: 'bar',
                                tooltip: true,
                                smooth: true,
                                symbol: 'none',
                                areaStyle: {
                                    normal: {
                                        opacity: 0.2
                                    }
                                }
                            },
                            {
                                data: this.y2Data,
                                name: '购买（光疗）',
                                type: 'bar',
                                tooltip: true,
                                smooth: true,
                                symbol: 'none',
                                areaStyle: {
                                    normal: {
                                        opacity: 0.2
                                    }
                                }
                            },
                            {
                                data: this.y3Data,
                                name: '剩余（光疗）',
                                type: 'bar',
                                tooltip: true,
                                smooth: true,
                                symbol: 'none',
                                areaStyle: {
                                    normal: {
                                        opacity: 0.2
                                    }
                                }
                            }
                        ],
                        color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
                        grid: {
                            left: 20,
                            right: 20,
                            bottom: 20,
                            top: 40,
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'axis'
                        }
                    }
                );
            },
            handleResize () {
                if (this.visitChart) this.visitChart.resize();
            }
        },
        mounted () {
            this.handleGetData();
            this.handleSetVisitChart();
        },
        beforeDestroy () {
            if (this.visitChart) {
                this.visitChart.dispose();
                this.visitChart = null;
            }
        }
    }
</script>
